﻿
@{
    ViewBag.Title = "测试";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>发布博客</legend>
</fieldset>

<div class="layui-field-box">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">标题 </label>
            <div class="layui-input-block">
                <input type="text" name="Title" lay-verify="Title" autocomplete="off" placeholder="请输入博客标题" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">类别 </label>
            <div class="layui-input-block" style="z-index:99999">
                <select name="CategoryId" lay-filter="CategoryId">
                    <option value="1" selected="selected">技术博客</option>
                    <option value="2">随笔日志</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">内容 </label>
            <div class="layui-input-block">
                <textarea id="Content" rows="18" name="Content" placeholder="请输入内容..." class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                @*<button class="layui-btn" id="addBlogAtricle">保存</button>*@
                <input type="button" class="layui-btn" id="addBlogAtricle" value="保存" />
            </div>
        </div>

        @Html.AntiForgeryToken()
    </form>
</div>

@section scripts{
    @*<script src="~/js/wangEditor/wangEditor.js"></script>*@

    <script type="text/javascript">
        // 当你使用表单时，Layui会对select、checkbox、radio等原始元素隐藏，
        // 从而进行美化修饰处理。但这需要依赖于form组件，所以你必须加载 form，并且执行一个实例。
        // 值得注意的是：导航的Hover效果、Tab选项卡等同理（它们需依赖 element 模块）
        // 显示select、check、radio控件
        layui.use('form', function () {

            var form = layui.form; // 只有执行了这一步，部分表单元素才会自动修饰成功

            //但是，如果你的HTML是动态生成的，自动渲染就会失效
            //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
            //form.render();

        });

        // 表单提交
        $("#addBlogAtricle").on('click', function () {

            console.log("add")

            var data = JSON.stringify({
                "Title": "111",
                "Content": "xxx",//editor.txt.html(),
                "CategoryId": 1,
                "__RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
            });

            //var xhr = new XMLHttpRequest;
            //xhr.open("POST", "/Admin/Blog/Add", false);
            //xhr.setRequestHeader("Content-Type", "application/json");
            //xhr.send(data);

            //xhr.onreadystatechange = function () {
            //    if (xhr.readyState == 4 && xhr.status == 200) {
            //        var s = xhr.responseText;
            //        alert(s);
            //    }
            //    else {
            //        console.log(xhr.responseText);
            //    }
            //}

            $.ajax({
                type: 'POST',
                url: 'Add',
                cache: false,
                //contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                contentType: 'application/json',
                data: data,
                dataType: 'json',
                success: function (res) {
                    console.log('success=>' + res);
                },
                error: function (e) {
                    layer.msg(e.responseText);
                    console.log('error=>' + e.responseText);
                },
                complete: function (e) {
                    console.log('complete=>' + e.responseText);
                }
            });

        });


    </script>

}

